<template>
  <template v-for="menu in menuList" :key="menu.path">
    <!-- 有子级 -->
    <el-sub-menu
      v-if="menu.children && menu.children.length > 0"
      :index="menu.path"
    >
      <template #title>
        <component
          :is="menu.meta.icon"
          style="width: 16px; height: 16px"
        ></component>
        <span>{{ menu.meta.title }}
          <!-- {{ resolvePath(menu.path) }}- -->
        </span>
      </template>
      <!-- 如果有三级菜单可以递归 -->
      <HeadSidebarItem
        :menuList="menu.children"
        :basePath="menu.path"
      ></HeadSidebarItem>
      <!-- <head-sidebar-item :menuList="menu.children" :base-path="resolvePath(menu.path)" :base-path-item="basePathTemp"/> -->
    </el-sub-menu>
    <el-menu-item v-else :index="menu.path">
      <!-- 使用icon动态加载-->
      <component
        :is="menu.meta.icon"
        style="width: 16px; height: 16px"
      ></component>
      <template #title
        >{{ menu.meta.title }}</template
      >
    </el-menu-item>
  </template>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'

import { isExternal } from '@/utils/index'
import path from 'path-browserify'
//菜单数据
type Props = {
  menuList: []
  basePath: ''
  // basePathItem:'',
}
const basePathxx = ref('bbbbbbbbb')
// const basePathTemp=ref("bbbbbbbbb")
const props = defineProps<Props>()
function resolvePath(routePath: string) {
  // console.info('-----5555555666', props.basePath, '---', routePath)
  // if (isExternal(routePath)) {
  //   return routePath;
  // }
  // if (isExternal(props.basePath)) {
  //   return props.basePath;
  // }
  // if(routePath){}
  const basePathTemp = props.basePath.replace('', '/')
  const routePathTem: any = routePath.replace('/', './')
  // 完整绝对路径 = 父级路径(/system) + 路由路径(/user)
  const fullPath = path.resolve(basePathTemp, routePathTem)

  return fullPath
}
</script>